<template>
    <div class="">
        <ezm-layout>
            <div class="" slot="nav">
                <van-nav-bar
                    title="待办任务演示"
                    left-arrow
                    @click-left="g_navigate.back()"
                ></van-nav-bar>
                <div class="pa-md" style="background-color: #ffc8cd;font-size: 12px;">
                    # 单页应用的一些小问题，比如：我们打开一个 Dialog 模态对话框，然后点击浏览器返回按钮，发现 Dialog 对话并没有消失；<br>
                    # 因此需要在打开 dialog 对话框的同时，将关闭对话框的回调函数添加到 待办列表中，当浏览器强行回退的时候，框架会自动将待办队列中的所有函数执行并清空；<br>
                    # 如果是使用 navigate 对象调用返回或跳转，则依次（倒序）执行待办函数；
                </div>
            </div>
            <ezm-scroll-box>
                <div class="pa-md">
                    <div class="mb-sm">
                        # 点击下面按钮将弹出对话框，之后点击浏览器返回，对话框将自动消失；
                    </div>
                    <van-button
                        class="mb-sm"
                        type="info"
                        @click="click1"
                        block
                    >点击弹出待办封装对话框
                    </van-button>
                    <van-button
                        class="mb-sm"
                        type="info"
                        @click="click2"
                        block
                    >点击无待办对话框
                    </van-button>
                    <div class="mb-sm">
                        # 待办队列演示
                    </div>
                    <van-button
                        class="mb-sm"
                        type="info"
                        block
                        @click="click3"
                    >添加待办函数
                    </van-button>
                    <van-button
                        class="mb-sm"
                        type="info"
                        block
                        @click="g_navigate.back()"
                    >点击返回
                    </van-button>
                    <div class="mb-sm"> 以下显示当前需要待办的任务：</div>
                    <div v-for="item in waitList" style="font-size: 12px;">
                        任务 id: {{ item.id }}
                    </div>
                </div>
            </ezm-scroll-box>

        </ezm-layout>
    </div>
</template>

<script>
    import EzmLayout from "@/components/layout/ezm-layout";
    import EzmScrollBox from "@/components/scroll/ezm-scroll-box";
    import {DialogUtil} from "@/utils/project.util";
    import {Events} from "@/utils/navigate.util";

    export default {
        name: 'RouteDemoWaitTask',
        mixins: [],
        components: {EzmScrollBox, EzmLayout},
        props: {},
        data() {
            return {
                waitList: Events.waitForTasks
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        activated() {
        },
        deactivated() {
        },
        methods: {
            click1() {
                DialogUtil.confirm("请直接点击返回按钮，我会自动消失哦!");
            },
            click2() {
                this.$dialog.confirm({
                    title: '无待办功能',
                    message: '请直接点击返回，我不会消失哦！'
                });
            },
            click3() {
                Events.addWaitTask(null);
            }
        }
    };
</script>

<style lang="less">

</style>